<template>
	<header>
		<div>
			<div class="dianyin spans">
				<span class="iconfont icon-liebiao span1"></span>
				<span class="span2">卖座电影</span>
			</div>
			<div class="divright">
				<div class="navright">深圳&ensp;<span class="iconfont icon-xiala"></span></div>
				<router-link to='/Land'>
					<div class="yonghu iconfont icon-yonghu"></div>
				</router-link>
				
			</div>
			<!--遮罩层-->
			<div class="zhezhao">
				<div class="zheleft">
					<div class="libiao">
						<ul>
							<li>
								<router-link to="/home"><span>首页</span><em class="iconfont icon-arrowright"></em></router-link>
							</li>
							<li>
								<router-link to="/list"><span>影片</span><em class="iconfont icon-arrowright"></em></router-link>
							</li>
							<li>
								<router-link to="/cinema"><span>影院</span><em class="iconfont icon-arrowright"></em></router-link>
							</li>
							<li>
								<router-link to="/xiang"><span>商城</span><em class="iconfont icon-arrowright"></em></router-link>
							</li>
							<li>
								<router-link to="/xiang"><span>演出</span><em class="iconfont icon-arrowright"></em></router-link>
							</li>
							<li>
								<router-link to="/xiang"><span>我的</span><em class="iconfont icon-arrowright"></em></router-link>
							</li>
							<li>
								<router-link to="/xiang"><span>卖座卡</span><em class="iconfont icon-arrowright"></em></router-link>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</header>
</template>

<script>
	import $ from 'jquery'
	//侧边栏淡入淡出
	
	export default {
		mounted(){
			function aaa() {
					//获取深色列表区域的right值
					var zhezhao = parseInt($(".zheleft").css('right'))
					console.log(zhezhao)
					//如果right值大于特定值
					if(zhezhao > 110) {
						//蒙尘淡入
						$(".zhezhao").fadeIn(300);
						//通过animate 设置right 为特定值  列表出现
						$(".zheleft").animate({
							right: '110px'
						})
					} else {
						//蒙尘淡出
						$(".zhezhao").fadeOut(400);
						//通过animate 设置right 为特定值   列表消失
						$(".zheleft").animate({
							right: '400px'
						})
					}
				}
			//阻止冒泡事件
			$(function() {
				$('.zheleft').click(function (e) {
					e.stopPropagation()
				})
				
		
				$(".spans").on("click", aaa)
		//遮罩层
		$(".zhezhao").click(function(e){
			aaa()
		})
	});
	
		}
	}
</script>

<style>

</style>